<template>
  <div>
    <!-- 活动首页按钮 -->
     <el-button type="primary" @click="activityIndex()">活动首页</el-button>
     <!-- 新增活动按钮 -->
            <el-button  class="el-icon-circle-plus-outline" type="warning" @click="handleAdd()">新增活动</el-button>
      <!-- 我发布的活动按钮 -->      
             <el-button type="success" @click="myActivity()">我发布的活动</el-button>  
    
     <!-- 新增活动 -->
    <el-dialog title="新增活动" :visible.sync="addVisible" width="60%" >  
      
      <!-- 3.使用更新子组件 -->
      <AddActivity :server="merchantsServer" v-if="refresh"     
        @add_dialog="addServer"
      ></AddActivity>    
    </el-dialog>
    
    <!-- 页码选择 -->
    <transition name="el-zoom-in-top">
      <el-row style="margin-top: 20px;"
              v-show="show">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="currentPage"
                       :page-sizes="[1,3,5,10,15,20]"
                       :page-size="size"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="total">
        </el-pagination>
      </el-row>
    </transition>
 <!--服务列表主体页面-->
    <div style="float:left; margin-top: 40px; height: 500px;width:405"
         v-for="(ta,index) in tableData"
         :key="index"
         @click="showAndOrder(ta)">

      <transition name="el-zoom-in-center">
        <div v-show="show"
             class="transition-box">{{ta.name}}</div>
      </transition>

      <transition name="el-zoom-in-left">
        <el-image v-show="show"
                  class="transition-box2"
                  :src="ta.image">
          <div slot="error">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2165691866,2570924737&fm=26&gp=0.jpg"
                 width="300px"
                 height="250px">
          </div>
        </el-image>
      </transition>

      <div style="display: flex; height: 100px;width:405">
        <transition name="el-zoom-in-top">
          <div v-show="show"
               class="transition-box3">{{ta.address}}</div>
        </transition>
        <transition name="el-zoom-in-bottom">
          <div v-show="show"
               class="transition-box4">
          <p class="abc">活动开始时间</p> 
          <p class="abc">{{ta.time}}</p>
          </div>
        </transition>
      </div>

    </div>
 <!--活动弹框-->
    <el-dialog title="活动详情与报名"
               :visible.sync="orderVisible"
               width="80%"
               height="80%">
      <Activity :server="currentServer" :userAndActivity="userAndActivity" :commentAndReply="commentAndReply"
             v-if="refresh"
             @closedialog="closeOrderVisible"></Activity>
      <span slot="footer"
            class="dialog-footer">
      </span>
    </el-dialog>

  </div>
</template>

  </div>
   

</template>

<script>
import Activity from './Activity'
import axios from '../../../axios_config'
import AddActivity  from './AddActivity'
import http from '../../../axios_config'
export default {
  components:{
    Activity,
    AddActivity


  },
data () {
    return {
      //发布活动
        addVisible:false,//新增对话框是否显示
      refresh: true,
       refreshadd: true,
       merchantsServer: {
        name:'',
        content:"",
        address:'',
        time:'',
        cid:'',
        image:''
      },
      //评论及回复
      commentAndReply:[],
      //活动和发起这数据
      userAndActivity:{},
      //分类数据
      typeData: [],
      //提供的服务数据
      tableData: [],
      //控制订购框是否显示
      orderVisible: false,
      //指向当前被选中的teacher信息对象
      currentServer: {},
      //强制刷新子组件
      refresh: true,
      //当前页
      currentPage: 1,
      //总条数
      total: 0,
      //总页数
      totalPage: 0,
      //每一页的条数
      size: 3,
      //类型
      serverType: 0,
      //名字
      serverLike: '',
      //显示子项
      show: false
    }
  },

  methods: {
    // 返回活动首页
    activityIndex(){
this.findByPage()
    },
    // 展示我的活动
    myActivity(){
      //隐藏数据的显示
      this.show = false;
      //利用axios
      http.get("http://192.168.11.18:8080/activity/findByPage/"+this.currentPage+"/"+this.size
      ).then(({data}) => {
        //success后执行 res是返回的结果 
       
        console.log(data);

        console.log(data.data.data);
        this.tableData = data.data.data;
        // //分页数据
        this.currentPage = data.data.currentPage;
        this.total = data.data.total;
        this.totalPage = data.data.totalPage;
        this.size =data.data.pageSize;
        let num = setTimeout(() => {
          this.show = true;
          clearTimeout(num);
        }, 200);
      });
    },
// 发布活动
addServer(data){
      console.log(data);
      this.addVisible=false

if (data.data.name!=null) {
   let params= new URLSearchParams();
             
              params.append("name",data.data.name);
              params.append("content",data.data.content);
              params.append("address",data.data.address)
              params.append("time",data.data.time)    
              params.append("cid",data.data.cid)
              params.append("image",data.data.image)    
//发送请求
            http.post("http://192.168.11.18:8080/activity/addActivitys",params)
            .then(res=>{
                console.log(res);
            });
}


    },
     //新增活动
    handleAdd() {
   this.addVisible=true
  //  更新数据
     this.refresh = false;
  this.$nextTick(()=>{
    this.refresh = true;
  });
    },
    //查看详情和下单方法
    showAndOrder (row) {
      //强制刷新
      this.refresh = false;
      this.$nextTick(() => {
        this.refresh = true;
      });
      //将选择查看的那一行信息显示
      this.currentServer = row;
      //   let ping = setTimeout(() => {
      //     this.orderVisible = true;
      //     clearTimeout(ping);
      //   }, 200);
      this.orderVisible = true;
      // 获取活动和发起者
      
// 获取评论
axios.get("http://192.168.11.18:8080/activityComment/findAllactivityComment/"+row.id).then(({data}) => {    
     
      console.log(data);      

    this.commentAndReply=data.data
      })
       axios.get("http://192.168.11.18:8080/activity/activityAndUser/"+row.id).then(({data}) => {      
        console.log(data); 
        this.userAndActivity=data.data
      })


    },

    //关闭订单框方法
    closeOrderVisible () {
      //关闭对话框
      this.orderVisible = false;
    },

    //选择每页条数
    handleSizeChange (size) {
      console.log("选择：" + size);
      this.size = size;
      //发请求
      this.findByPage();
    },

    //改变页数
    handleCurrentChange (page) {
      console.log("选择：" + page + "页");
      this.currentPage = page;
      //发送页数请求
      this.findByPage();
    },


    //向服务器发送请求获取数据
    findByPage () {
      //隐藏数据的显示
      this.show = false;
      //利用axios
      http.get("http://192.168.11.18:8080/activity/findAllActivity/"+this.currentPage+"/"+this.size
      ).then(({data}) => {
        //success后执行 res是返回的结果 
       
        console.log(data);

        console.log(data.data.data);
        this.tableData = data.data.data;
        // //分页数据
        this.currentPage = data.data.currentPage;
        this.total = data.data.total;
        this.totalPage = data.data.totalPage;
        this.size =data.data.pageSize;
        let num = setTimeout(() => {
          this.show = true;
          clearTimeout(num);
        }, 200);
      });


    },

    //改变服务类型的方法
    chooseType (tid) {
      this.serverType = tid;
      this.serverLike = '';
      this.currentPage = 1;
      console.log(tid);
      this.findByPage();
    },
    //模糊查询
    search () {
      console.log("模糊查询");
      this.serverType = 0;
      this.currentPage = 1;
      this.findByPage();

    },

    //获取服务的分类
    getServerType () {
      axios.get("http://192.168.11.18:8080/serverType/selectServerTypeByCommunity").then(res => {
        //success后执行 res是返回的结果 
        console.log(res.data);
        this.typeData = res.data;
        console.log(this.typeData);
      });
    }
  },

  //当前创建组件完毕时调用
  mounted () {
    //调用方法，获取分类
    this.getServerType();
    //利用方法，初始化页面信息
    this.findByPage();
  }
}

</script>

<style scoped>
.transition-box {
  width: 300px;
  height: 100px;
  border-radius: 5px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin: 10px 10px;
}
.transition-box2 {
  width: 300px;
  height: 250px;

  border-radius: 5px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 0px 0px;
  box-sizing: border-box;
  margin: 0px 10px;
}
.transition-box3 {
  width: 140px;
  height: 100px;
  border-radius: 5px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin: 5px 10px;
}
.transition-box4 {
  width: 140px;
  height: 100px;
  border-radius: 5px;
  background-color: #409eff;
  text-align: center;
  color: #fff;
  padding: 40px 20px;
  box-sizing: border-box;
  margin: 5px 10px;
}
.abc{
  position: relative;
  top:-13px;
  margin: 0;
  padding: 0;
    
}
</style>